<template>
  <div class="app-container">
     <el-form :model="form_create" label-width="120px">
       <h4>出库信息</h4>
       <p class="jc_dialog_block">
       <el-form-item label="出库单号">
         <el-input placeholder="自动生成" disabled></el-input>
       </el-form-item>
       <el-form-item label="日期">
         <el-input placeholder="默认当前"></el-input>
       </el-form-item>
       <el-form-item label="仓库">
         <el-select placeholder="默认账户 根据权限更改" v-model="pl88">
           <el-option label="可用" value="enabled"></el-option>
           <el-option label="不可用" value="disabled"></el-option>
         </el-select>
       </el-form-item>
       </p>
       <p class="jc_dialog_block">
         <el-form-item label="出库类型">
           <el-select placeholder="请选择" v-model="pl88">
             <el-option label="可用" value="enabled"></el-option>
             <el-option label="不可用" value="disabled"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="部门">
           <el-select placeholder="请选择" v-model="pl88">
             <el-option label="可用" value="enabled"></el-option>
             <el-option label="不可用" value="disabled"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="客户/接收人">
           <el-select placeholder="请选择" v-model="pl88">
             <el-option label="可用" value="enabled"></el-option>
             <el-option label="不可用" value="disabled"></el-option>
           </el-select>
         </el-form-item>
       </p>
       <p class="jc_dialog_block">
         <el-form-item label="关联单号">
           <el-input></el-input>
         </el-form-item>
         <el-form-item label="操作人">
           <el-input placeholder="默认当前登录"></el-input>
         </el-form-item>
         <el-form-item label="扩展字段">
           <el-input></el-input>
         </el-form-item>
       </p>
       <p class="jc_dialog_block">
         <el-form-item label="备注">
           <el-input type="textarea"></el-input>
         </el-form-item>
       </p>
      <h4>备件信息</h4>
      <el-button-group class="jc_btn_wrap jc_btn_left">
        <ChooseSpareParts v-model="getSparePartsData"></ChooseSpareParts>
        <el-input class="jc_scanCode"placeholder="光标置于本处后开始扫码，备件编码"></el-input>
      </el-button-group>
      <el-button-group class="jc_btn_wrap jc_btn_right">
        <el-radio-group v-model="unit" >
          <el-radio :label="1">换算单位</el-radio>
          <el-radio :label="0">计量单位</el-radio>
        </el-radio-group>
      </el-button-group>
      <el-table v-if="unit" :data="getSparePartsData"  border fit highlight-current-row class="jc_table_wrap">
        <el-table-column type="index" width="70" label="编号">
        </el-table-column>
        <el-table-column label='操作'>
          <template scope="scope">
            <el-button type="text" @click="deleteSparePartRow(scope.$index, getSparePartsData)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="备件编号">
          <template scope="scope">
            {{scope.row.description}}
                </template>
        </el-table-column>
        <el-table-column label="备件名称">
          <template scope="scope">
            {{scope.row.description}}
                </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template scope="scope">
            {{scope.row.description}}
                </template>
        </el-table-column>
        <el-table-column label="计量单位">
          <template scope="scope">
            {{scope.row.description}}
                </template>
        </el-table-column>
        <el-table-column label="数量">
          <template scope="scope">
            {{scope.row.description}}
                </template>
        </el-table-column>
        <el-table-column label="换算单位">
          <template scope="scope">
            {{scope.row.description}}
                </template>
        </el-table-column>
        <el-table-column label="换算数量">
          <template scope="scope">
            {{scope.row.description}}
                </template>
        </el-table-column>
      </el-table>
      <el-table v-else="unit" :data="getSparePartsData" border fit highlight-current-row class="jc_table_wrap">
        <el-table-column type="index" width="70" label="编号">
        </el-table-column>
        <el-table-column label='操作'>
          <template scope="scope">
            <el-button type="text" @click="deleteSparePartRow(scope.$index, getSparePartsData)">删除</el-button>
          </template>
        </el-table-column>
      <el-table-column label="备件编号">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="备件名称">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="规格型号">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="计量单位">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="数量">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
    </el-table>
     </el-form>
    <div slot="footer" class="dialog-footer" style="display:block;text-align: center;margin-top: 10px;">
       <el-button type="primary" @click="submitCreateForm">确定</el-button>
       <el-button @click="goToBack">取消</el-button>
     </div>
  </div>
</template>

<script>

  import {getRoleList} from "../../api/system";
  import ChooseSpareParts from "../components/Choice_spareParts"

  export default {
    components: {
      ChooseSpareParts
    },
    data() {
      return {
        searchList: {},
        create_visible:false,
        form_create: {},
        list: null,
        activeName: 'first',
        unit: 1,
        total:0,
        multipleSelection: [],
        getSparePartsData: [],
        pl88: '',
      }

    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        };
        return statusMap[status]
      }
    },
    created() {
      //this.fetchData()
    },
    methods: {
      /*fetchData(p=0) {
        this.listLoading = true;
        var params = this.searchList;
        params.page = p;
        getRoleList(params).then(data => {
          this.list = data.obj.rows
          this.total = parseInt(data.obj.total)
          this.listLoading = false
        })
      },*/
      goToBack() {
        this.$router.push({path:'/warehouse/out_wh'});
      },
      submitCreateForm() {

      },
      deleteSparePartRow(index, rows) {
        rows.splice(index, 1);
      },
      deleteRow() {
        alert('用this.multipleSelection获得要删除的数据');
        console.log('this.multipleSelection',this.multipleSelection);
      },

      changePage(p) {
        //this.fetchData(p)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    computed: {
      tableHeight() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight;
      },
      tableHeight_top() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
      tableHeight_bottom() {
        const filterHeight = 100;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
    }
  }
</script>
